<script>
import { reactive } from "vue";
import { public_status } from "./store/public_status";

export default {
  setup() {
    let data = reactive({
      itemIndex: 0,

      startY: null, // # 起始位置
      endY: null, // # 结束位置
    });

    let _isShow = public_status(); // # 底部导航栏显示隐藏 购物车高度
    _isShow._isShow = true; // # 升高底部导航
    _isShow.display = true; // # 显示底部导航

    // # 判断手指滑动位置差从而使底部导航显示隐藏
    let is_show = (e) => {
      if (e.touches.length != 0) {
        data.startY = e.touches[0].clientY;
      } else {
        data.endY = e.changedTouches[0].clientY;

        // ! 计算手指滑动的位置差
        let isShow = data.startY - data.endY;

        if (isShow > 10) {
          _isShow._isShow = false;
        } else if (isShow < -10) {
          _isShow._isShow = true;
        }

        // ! 清空
        data.startY = null;
        data.endY = null;
      }
    };

    return {
      data,
      is_show,
      _isShow,
    };
  },
  activated() {
    // 页面每次进入将手机动态验证码置为空
    this.$refs.mobPwdCode.inputValue = "";
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  },
};
</script>


<template>
  <div class="main" @touchstart="is_show" @touchend="is_show">
    <!-- 路由视图 -->

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>

    <!-- <router-view></router-view> -->

    <!-- 路由视图 -->

    <!-- 底部导航 -->
    <div
      :class="['footerBar', { show: _isShow._isShow }]"
      v-show="_isShow.display"
    >
      <div class="content">
        <router-link to="/home" :class="['item']">
          <i class="iconfont icon-V"></i>
          <div class="mask"></div>
        </router-link>
        <router-link to="/category" :class="['item']">
          <i class="iconfont icon-Formal-Coat" style="font-size: 20px"></i>
          <div class="mask"></div>
        </router-link>
        <router-link to="/shopCar" :class="['item']">
          <i class="iconfont icon-gouwuche"></i>
          <div class="mask"></div>
        </router-link>
        <router-link to="/my" :class="['item']">
          <i class="iconfont icon-gerenzhongxin"></i>
          <div class="mask"></div>
        </router-link>
      </div>
    </div>
    <!-- 底部导航 -->
  </div>
</template>

<style lang="scss" >
@import url("./assets/css/base.css");
.main {
  // todo 底部导航
  > .footerBar {
    &.show {
      bottom: 22px;
    }

    transition: bottom 0.3s;
    position: fixed;
    bottom: -75px;
    z-index: 100;

    overflow: hidden;

    max-width: 750px;
    width: 100%;
    height: 68px;
    box-sizing: border-box;

    padding: 0 15px;

    > .content {
      position: relative;
      height: 100%;
      width: 100%;

      border-radius: 15px;
      background: #222;
      overflow: hidden;

      display: flex;
      box-sizing: border-box;
      padding: 0 10px;

      > .item {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        color: #444;

        position: relative;

        > i {
          font-size: 26px;
        }

        > .mask {
          position: absolute;

          width: 40px;
          height: 40px;
          background: rgb(86, 221, 176);
          bottom: -60px;

          transform: rotate(45deg);
          transition: bottom 0.3s;

          border-top-left-radius: 10px;
        }

        &.con {
          > i {
            color: rgb(86, 221, 176);
          }

          > .mask {
            bottom: -35px;
          }
        }
      }
    }
  }
}
</style>